<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../数据可视化/css/echcrt.css">
    </head>

    <body>
        <header>
            <h1>数据可视化-ECharts</h1>
            <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
        </header>
        <section class="mainbox">
            <div class="column">
                <div class="panel bar">
                    <h2>  柱状图-就业行业 <a href="#">2019</a>
                        <a href="#"> 2020</a></h2>
                    <div class="chart"></div>
                    <div class="panel-footer"> </div>
                </div>
                <div class="panel zhe">
                    <h2>折线图-人员变化</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"> </div>
                </div>
                <div class="panel bing">
                    <h2>饼形图-年龄分布</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"> </div>
                </div>
            </div>
            <div class="column">
                <!-- no模块制作 -->
                <div class="no">
                    <div class="on-hd">
                        <ul>
                            <li>125811</li>
                            <li>100000</li>
                        </ul>
                    </div>
                    <div class="on-bd">
                        <ul>
                            <li>前端需求人数</li>
                            <li>市场供应人数</li>
                          </ul>
                    </div>
                </div>
                <!-- //地图模块 -->
                <div class="map">
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                    <div class="chart"></div>
                </div>
            </div>
            <div class="column">
                <div class="panel ji">
                    <h2>柱状图-技能掌握</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"> </div>
                </div>
                <div class="panel bo">
                    <h2>折线图-播放量</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"> </div>
                </div>
                <div class="panel di">
                    <h2>饼形图-地区分布</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"> </div>
                </div>
            </div>
        </section>
    </body>

</html>
<script>
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".showTime").innerText =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }
</script>
<script src="./js/jquery.js"></script>
<script src="./js/flexible.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/index.js"></script>
<!-- //必须引入中国地图 地图需要 -->
<script src="./js/china.js"></script>
<script src="./js/myMap.js"></script>
